import React, { Component } from 'react'
import {myGet, myPost} from '../myFetch'
import {NavLink} from 'react-router-dom'
// import store from '../store/index'

export default class Home extends Component {
  constructor() {
    super();
    this.state = {
      name: '',
      age: 1
    }
  }
  getData() {
    this.http('/api/menulist')
      .then(res => {
        console.log(res);
      })
      .catch(err => {
        console.log(err);
      })
  }
  postData() {
    this.http.post('/api/menuedit', {
      id: 787,
      pid11234: 2345
    })
      .then(res => {
        console.log(res);
      })
      .catch(err => {
        console.log(err);
      })
  }
  getDataFetch() {
    // 通过fetch发送get请求，默认get
    fetch('/api/menulist')
    .then(res => {
      // 这个res是返回的响应
      console.log(11,res);
      return res.json()
    })
    .then(res=>{
      // 这个res才是想要的数据
      console.log(22,res);
    })
  }
  postDataFetch() {
    // fetch的post请求
    fetch('/api/menuedit', {
      method: 'post',
      body: {
        id: 787,
        pid11234: 2345
      }
    })
      .then(res => {
        // 这个res是返回的响应
        console.log(11, res);
        return res.json()
      })
      .then(res => {
        // 这个res才是想要的数据
        console.log(22, res);
      })
  }
  // componentDidMount() {
  //   // 订阅数据的变化,每次变化都会自动执行
  //   this.unsubscribe = store.subscribe(()=>{
  //     // console.log(store.getState());
  //     this.setState(store.getState())
  //   })
  //   // console.log('--------------');
  //   // vuex this.$store.state.xxx
  //   // console.log(store.getState());
  //   // 这个写法简单
  //   this.setState(store.getState())
  //   // 这个写法复杂
  //   // this.setState({
  //   //   age: store.getState().age,
  //   //   name: store.getState().name
  //   // })
  //   // console.log('--------------');
  //   // 进入页面，自动调用发请求的函数
  //   // this.postFn();
  //   // this.getFn();
  // }
  // componentWillUnmount() {
  //   // 在即将离开组件时，取消订阅
  //   this.unsubscribe()
  // }
  postFn() {
    myPost('/api/menuedit', {di: 784})
    .then(res => {
      console.log(666, res);
    })
  }
  getFn() {
    myGet('/api/menulist')
    .then(res => {
      console.log(777, res);
    })
  }
  // changeAge() {
  //   // 修改年龄
  //   store.dispatch({ type: 'changeAge', payload: 20 });
  // }
  // changeName() {
  //   // 修改年龄
  //   store.dispatch({ type: 'changeName', name: 'Jack'});
  // }
  render() {
    // 获取store中state的数据
    return (
      <div>
        <h1>我是首页--发请求</h1>
        <NavLink to="/layout/small1">子路由</NavLink>
        {/* <p>我是{this.state.name}，我今年{this.state.age}岁</p> */}
        {/* <button onClick={()=>this.changeAge()}>修改年龄</button>
        <button onClick={()=>this.changeName()}>修改姓名</button> */}
        <hr />
        <button onClick={()=>this.getData()}>发请求1</button>
        <button onClick={()=>this.postData()}>发请求2</button>
        <hr />
        <button onClick={()=>this.getDataFetch()}>fetch1</button>
        <button onClick={()=>this.postDataFetch()}>fetch2</button>
        <hr />
        <p>redux核心概念</p>
        1.store 用来存放数据；2.view视图发出修改数据（state）的动作（action）；3.redcer负责修改数据的具体内容；4.view通过getState方法获取最新数据
        <p>三大原则</p>
        1. 单一数据源（SSOT）
        2. state是只读的
        3. 通过纯函数修改state，redcer是纯函数
      </div>
    )
  }
}
